<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class和style属性</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    bb:'aa',
                    dd:'cc',
                    flag:true,
                    num:-2,
                    hello:{aa:true,cc:true},
                    xx:{color:'blue',fontSize:'30px'},
                    yy:{backgroundColor:'#ff7300'}
                }
            });
        }
    </script>
    <style>
        .aa{
            color:red;
            font-size:20px;
        }
        .cc{
            background-color:#ccc;
        }
    </style>
</head>
<body>
<div id="itany">
    <!--
        class属性
     -->
     <p class="aa">南京网博1</p>    可以访问，普通css方式

     <p :class="aa">南京网博2</p>   不可以，Vue的属性绑定时不能直接css样式

    <!-- 方式1:变量形式 -->
     <p :class="bb">南京网博3</p>

    <!-- 方式2：数组形式，同时引用多个 -->
     <p :class="[bb,dd]">南京网博4</p>

    <!-- 方式3：json形式，常用！！！ -->
     <p :class="{aa:true,cc:flag}">南京网博5</p>
     <p :class="{aa:num>0}">南京网博6</p>

    <!-- 方式4：变量引用json形式 -->
     <p :class="hello">南京网博7</p>

    <!--
        style属性
     -->
    <p :style="[xx,yy]">itany</p>

</div>
</body>
</html>